<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏豫强的作业</title>
    <link rel="stylesheet" href="a.css">

</head>
<style>
    #ta1 {
        width: 500px;
        height: 300px;
        border: 1px #000 solid;
        text-align: center;
        border-collapse: collapse;
    }

    #ta1 td,
    th {
        border: 1px #000 solid;
        width: 70px;
    }
</style>

<body>

    <div id="box1"></div>
    <input type="text" id="text" placeholder="输入姓名">
    <button id="cha">查询姓名</button>
    <button id="btn1">总分低于300的</button>
    <button id="btn2">总分高于300的</button>
    <button id="btn3">升序</button>
    <button id="btn4">降序</button>
    <button id="shan">尾部删除数据</button>
    &emsp;
    <button id="jia">尾部添加数据</button>
    <script>
        var btn = "<button id='bt1'>删除</button>"
        var data = [{

                id: 1910001,
                name: 'A',
                score: [{
                        math: 100
                    },
                    {
                        english: 99
                    },
                    {
                        chinese: 98
                    },
                    {
                        history: 95
                    },
                    {
                        zong: 392
                    },
                    {
                        btn: btn
                    }
                ]
            },
            {
                id: 1910002,
                name: 'B',
                score: [{
                        math: 50
                    },
                    {
                        english: 30
                    },
                    {
                        chinese: 60
                    },
                    {
                        history: 45
                    },
                    {
                        zong: 185
                    },
                    {
                        btn: btn
                    }
                ]
            },
            {
                id: 1910003,
                name: 'C',
                score: [{
                        math: 100
                    },
                    {
                        english: 85
                    },
                    {
                        chinese: 96
                    },
                    {
                        history: 95
                    },
                    {
                        zong: 376
                    },
                    {
                        btn: btn
                    }
                ]
            },
            {
                id: 1910004,
                name: 'D',
                score: [{
                        math: 99
                    },
                    {
                        english: 99
                    },
                    {
                        chinese: 99
                    },
                    {
                        history: 98
                    },
                    {
                        zong: 395
                    },
                    {
                        btn: btn
                    }
                ]
            },
        ];
        var a = {
            id: 1910004,
            name: 'D',
            score: [{
                    math: 100
                }, {
                    english: 99
                },
                {
                    chinese: 98
                }, {
                    history: 95
                }, {
                    zong: 392
                }, {
                    btn: btn
                }
            ]
        }


        function fn(ta) {
            var tab =
                "<table id='ta1'><tr><th>ID</th><th>名字</th><th>数学成绩</th><th>英语成绩</th><th>语文成绩</th><th>历史成绩</th><th>总成绩</th><th>删除</th></tr>"
            for (var i = 0; i < ta.length; i++) {
                tab += "<tr>"
                for (var item in ta[i]) {
                    if (Array.isArray(ta[i][item]))
                        for (var j = 0; j < ta[i][item].length; j++) {
                            tab += "<td>"
                            for (var itema in ta[i][item][j]) {
                                tab += ta[i][item][j][itema]
                            }
                            tab += "</td>"
                        }
                    else {
                        tab += "<td>" + ta[i][item] + "</td>"
                    }
                }
            }
            tab += "</table>"
            box1.innerHTML = tab
        }
        fn(data)

        shan.onclick = function () {
            data.pop()
            fn(data)
        }
        jia.onclick = function () {
            data.push(a)
            fn(data)
        }
        // 过滤
        btn1.onclick = function () {
            var a = data.filter(
                function (item) {
                    return item["score"][4].zong < 300;
                }
            )
            fn(a)
        }
        btn2.onclick = function () {
            var a = data.filter(
                function (item) {
                    return item["score"][4].zong > 300;
                }
            )
            fn(a)

        }
        cha.onclick = function () {

            var a = data.filter(
                function (item) {
                    return item.name == text.value;
                }
            )
            fn(a)
        }
        // 升序
        btn3.onclick = function () {
            var a = data.sort(function (q, p) {
                return q.score[4].zong - p.score[4].zong;
            })
            fn(a) 
        }

        // 降序
        btn4.onclick = function () {
            var a = data.sort(function (q, p) {
                return p.score[4].zong - q.score[4].zong;
            })
            fn(a)
        }
    </script>














</body>

</html>